JS延时加载

您所在的位置：网站首页 › css 延迟加载 › JS延时加载

JS延时加载

2023-09-30 08:31| 来源: 网络整理| 查看: 265

延迟加载需要使用延迟加载的原因：

（1）DOM还未加载完毕就执行JS，代码会出现错误（2）很多资源同时加载浪费内存，浪费加载时间（3）用户访问一部分只展示这一部分的内容（按需加载）

延迟加载的方法： defer：当前页面解析完毕后（dom、css、同步js解析完）再执行 1 2 3

执行顺序：2、3、1

async：不能控制加载顺序 1 2 3 4

执行顺序：2、1、4、3或者1、2、3、4或者2、4、1、2或者2、3、1、4等等

动态创建DOM function add() { var ele = document.createElement('script') ele.src = '..' document.body.appendChild(ele) } if(window.addEventListener) window.addEventListener('load', add, false) else if (window.attchEvent) { window.attchEvent('onLoad', add) }else{ window.onload = add }

可以在某个元素存在的情况下动态创建script

使用jQuery的getScript方法

setTimeout：使用延时函数

把JS引入放到最后

var ele = document.createElement('script') ele.src = '..' document.body.appendChild(ele) 延迟加载的优缺点：优点：

（1）提高网站的加载速度，增强用户体验（2）减少带宽、内存、存储的消耗，减少服务器压力（3）在某些场景中更合理

缺点：

（1）使代码编写时更加复杂（2）影响网站在搜索引擎上的排名

Vue中使用延迟加载

路由懒加载

import About from '../components/About.vue'; //直接引用的方式，非懒加载，后续项目打包结束将会直接打包到app.js文件中 const routes = [ { path: '/about',component: About } //引入组件 ] //懒加载不需要在上方引入 const routes = [ { path: '/about'， component: () => import( /* webpackChunkName: 'about' */ '../components/About.vue' ) } ] //懒加载最后打包工具打包不会将About.vue组件中的内容打包进app.js中 //它会单独打包成一个新的about.js文件，并在页面加载完成后异步加载，从而达到懒加载效果 //包装到箭头函数中，vue仅在请求到对应组件时执行并加载模块

注意：import中 /* webpackChunkName: ‘about’ */ 这个注释必须有，这个为将来打包命名

参考文章： https://zhuanlan.zhihu.com/p/147922995 https://www.jianshu.com/p/8920dc078689

【本文地址】

JS延时加载

JS延时加载

今日新闻

推荐新闻